<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<#include "/common/head.ftl" />
</head>

<body>
	<#include "/common/nav.ftl" />	
	
	<div class="container theme-showcase" role="main">
		<div class="clearfix">
			<!-- Split button -->
			<div class="btn-toolbar pull-right" role="toolbar">
				<div class="btn-group">
		    		<button type="button" data-toggle="modal" data-target="#importForTransfer" class="btn btn-primary">导入转岗</button>
		    		<button type="button" data-toggle="modal" data-target="#importForTraining" class="btn btn-primary">导入培训</button>
		    		<button type="button" data-toggle="modal" data-target="#importForDimission" class="btn btn-primary">导入离职</button>
				</div>
			</div>
		</div>
	
        <div class="well well-sm">
			<form id="searchForm" action="${base}/user/query" method="post" role="form">
				<table>
					<tr>
						<td><label>待培训课程:</label></td>
						<td>
							<select name="notTrainCourse" class="form-control">
								<option value="">请选择...</option>
								<#list dict.select('COURSE') as t>
								<option value="${t.val}">${t.name}</option>
								</#list>
							</select>
						</td>
						<td><label>Join Team After:</label></td>
						<td>
							<select name="year" class="form-control">
								<#list years as t>
									<option value="${t}">${t}</option>
								</#list>
							</select>
						</td>
						<td>
							<select name="month" class="form-control">
								<#list months as t>
									<option value="${t}">${t}</option>
								</#list>
							</select>
						</td>
						<td><label>Team:</label></td>
						<td>
						<select name="team" class="form-control">
								<option value="">请选择...</option>
							<#list dict.select('TEAM') as t>
								<option value="${t.val}">${t.name}</option>
							</#list>
						</select>
						</td>
						<td rowspan="2" class="action-group">
							<button type="submit" class="btn btn-primary">查询</button>
						</td>
					</tr>
				</table>
			</form>
		</div>

		<#if userList??>
		<div class="panel panel-default">	
			<div class="panel-heading">
              	<h3 class="panel-title">结果</h3>
            </div>
            <div class="panel-body">
            	<p class="bg-primary">共 ${userList?size} 条记录</p>
				<table class="table table-striped table-bordered table-hover">
					<thead>
					<tr>
						<th>英文名</th>
					</tr>
					</thead>
					<tbody>
						<#list userList as t>
							<tr>						
								<td>${t.eName!}</td>
							</tr>
						</#list>
					</tbody>
				</table>
			</div>
		</div>
		</#if>
	</div>
	
	<div class="modal fade" id="importForTransfer" role="dialog" aria-hidden="true">
  		<div class="modal-dialog">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        			<h4 class="modal-title">导入转岗信息</h4>
      			</div>
      			<div class="modal-body">        			
        			<!-- D&D Markup -->
        			<div id="drag-and-drop-zone" class="uploader">
          				<div>Drag &amp; Drop Images Here</div>
          				<div class="or">-or-</div>
          				<div class="browser">
            				<label>
              					<span>Click to open the file Browser</span>
              					<input type="file" name="filedata" multiple="multiple" title='Click to add Files'>
            				</label>
          				</div>
        			</div>
        			<!-- /D&D Markup -->
        			<!--<div id="fileList">-->
        			<!-- Files will be places here -->
      				<!--</div>-->
      				<div id="debug">
        				<h2>Debug</h2>
        				<div>
          					<ul>
            				<!-- Debug lines will be added here -->
          					</ul>
        				</div>
      				</div>
      			</div>
      			<div class="modal-footer">
        			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     	 		</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div class="modal fade" id="importForTraining" role="dialog" aria-hidden="true">
  		<div class="modal-dialog">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        			<h4 class="modal-title">导入培训信息</h4>
      			</div>
      			<div class="modal-body">        			
        			<!-- D&D Markup -->
        			<div id="drag-and-drop-zone" class="uploader">
          				<div>Drag &amp; Drop Images Here</div>
          				<div class="or">-or-</div>
          				<div class="browser">
            				<label>
              					<span>Click to open the file Browser</span>
              					<input type="file" name="filedata" multiple="multiple" title='Click to add Files'>
            				</label>
          				</div>
        			</div>
        			<!-- /D&D Markup -->
        			<!--<div id="fileList">-->
        			<!-- Files will be places here -->
      				<!--</div>-->
      				<div id="debug">
        				<h2>Debug</h2>
        				<div>
          					<ul>
            				<!-- Debug lines will be added here -->
          					</ul>
        				</div>
      				</div>
      			</div>
      			<div class="modal-footer">
        			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     	 		</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div class="modal fade" id="importForDimission" role="dialog" aria-hidden="true">
  		<div class="modal-dialog">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        			<h4 class="modal-title">导入离职信息</h4>
      			</div>
      			<div class="modal-body">        			
        			<!-- D&D Markup -->
        			<div id="drag-and-drop-zone" class="uploader">
          				<div>Drag &amp; Drop Images Here</div>
          				<div class="or">-or-</div>
          				<div class="browser">
            				<label>
              					<span>Click to open the file Browser</span>
              					<input type="file" name="filedata" multiple="multiple" title='Click to add Files'>
            				</label>
          				</div>
        			</div>
        			<!-- /D&D Markup -->
        			<!--<div id="fileList">-->
        			<!-- Files will be places here -->
      				<!--</div>-->
      				<div id="debug">
        				<h2>Debug</h2>
        				<div>
          					<ul>
            				<!-- Debug lines will be added here -->
          					</ul>
        				</div>
      				</div>
      			</div>
      			<div class="modal-footer">
        			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     	 		</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<#include "/common/foot.ftl" />
	<script src="${base}/resources/uploader/dmuploader.min.js"></script>
	<script>
		$(function() {
			$('select[name=team]').val('${filter.team!}');
			$('select[name=userType]').val('${filter.userType!}');
			$('select[name=notTrainCourse]').val('${filter.notTrainCourse!}');
			$('select[name=year]').val('${year!}');
			$('select[name=month]').val('${month!}');
			
			$('#searchForm').validate({
				rules: {
					notTrainCourse: "required",
					team: "required",
					year: {
						required: true
					},
					month: {
						required: true
					}
				}
			});
			
			// Upload Plugin itself
      		$('#importForTraining #drag-and-drop-zone').dmUploader({
        		url: '${base}/user/upload/training',
        		dataType: 'json',
        		//allowedTypes: 'image/*',
        		/*extFilter: 'jpg;png;gif',*/
        		onBeforeUpload: function(id){
          			add_log('Starting the upload of #' + id);
          
          			update_file_status(id, 'uploading', 'Uploading...');
        		},
        		onNewFile: function(id, file){
          			clearLog();
          			
          			add_log('New file added to queue #' + id);
        		},
        		onComplete: function(){
          			add_log('All pending tranfers finished');
        		},
        		onUploadProgress: function(id, percent){
          			var percentStr = percent + '%';

          			update_file_progress(id, percentStr);
        		},
        		onUploadSuccess: function(id, data){
          			add_log('Upload of file #' + id + ' completed');
          
          			add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
          
          			update_file_status(id, 'success', 'Upload Complete');
          
          			update_file_progress(id, '100%');
        		},
        		onUploadError: function(id, message){
          			add_log('Failed to Upload file #' + id + ': ' + message);
          
          			update_file_status(id, 'error', message);
        		},
        		onFileTypeError: function(file){
          			add_log('File \'' + file.name + '\' cannot be added: must be an image');
          
        		},
        		onFileSizeError: function(file){
          			add_log('File \'' + file.name + '\' cannot be added: size excess limit');
        		},
        		/*onFileExtError: function(file){
          			$.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' has a Not Allowed Extension');
        		},*/
        		onFallbackMode: function(message){
          			alert('Browser not supported(do something else here!): ' + message);
        		}
      		});
      		
      		$('#importForTransfer #drag-and-drop-zone').dmUploader({
	    		url: '${base}/user/upload/transfer',
	    		dataType: 'json',
	    		//allowedTypes: 'image/*',
	    		/*extFilter: 'jpg;png;gif',*/
	    		onBeforeUpload: function(id){
	      			add_log('Starting the upload of #' + id);
	      
	      			update_file_status(id, 'uploading', 'Uploading...');
	    		},
	    		onNewFile: function(id, file){
	    			clearLog();
	    		
	      			add_log('New file added to queue #' + id);
	    		},
	    		onComplete: function(){
	      			add_log('All pending tranfers finished');
	    		},
	    		onUploadProgress: function(id, percent){
	      			var percentStr = percent + '%';
	
	      			update_file_progress(id, percentStr);
	    		},
	    		onUploadSuccess: function(id, data){
	      			add_log('Upload of file #' + id + ' completed');
	      
	      			add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
	      
	      			update_file_status(id, 'success', 'Upload Complete');
	      
	      			update_file_progress(id, '100%');
	    		},
	    		onUploadError: function(id, message){
	      			add_log('Failed to Upload file #' + id + ': ' + message);
	      
	      			update_file_status(id, 'error', message);
	    		},
	    		onFileTypeError: function(file){
	      			add_log('File \'' + file.name + '\' cannot be added: must be an image');
	      
	    		},
	    		onFileSizeError: function(file){
	      			add_log('File \'' + file.name + '\' cannot be added: size excess limit');
	    		},
	    		/*onFileExtError: function(file){
	      			$.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' has a Not Allowed Extension');
	    		},*/
	    		onFallbackMode: function(message){
	      			alert('Browser not supported(do something else here!): ' + message);
	    		}
	  		});
	  		
	  		$('#importForDimission #drag-and-drop-zone').dmUploader({
	    		url: '${base}/user/upload/dimission',
	    		dataType: 'json',
	    		//allowedTypes: 'image/*',
	    		/*extFilter: 'jpg;png;gif',*/
	    		onBeforeUpload: function(id){
	      			add_log('Starting the upload of #' + id);
	      
	      			update_file_status(id, 'uploading', 'Uploading...');
	    		},
	    		onNewFile: function(id, file){
					clearLog();
					
	      			add_log('New file added to queue #' + id);
	    		},
	    		onComplete: function(){
	      			add_log('All pending tranfers finished');
	    		},
	    		onUploadProgress: function(id, percent){
	      			var percentStr = percent + '%';
	
	      			update_file_progress(id, percentStr);
	    		},
	    		onUploadSuccess: function(id, data){
	      			add_log('Upload of file #' + id + ' completed');
	      
	      			add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
	      
	      			update_file_status(id, 'success', 'Upload Complete');
	      
	      			update_file_progress(id, '100%');
	    		},
	    		onUploadError: function(id, message){
	      			add_log('Failed to Upload file #' + id + ': ' + message);
	      
	      			update_file_status(id, 'error', message);
	    		},
	    		onFileTypeError: function(file){
	      			add_log('File \'' + file.name + '\' cannot be added: must be an image');
	      
	    		},
	    		onFileSizeError: function(file){
	      			add_log('File \'' + file.name + '\' cannot be added: size excess limit');
	    		},
	    		/*onFileExtError: function(file){
	      			$.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' has a Not Allowed Extension');
	    		},*/
	    		onFallbackMode: function(message){
	      			alert('Browser not supported(do something else here!): ' + message);
	    		}
	  		});
		});
		
		//-- Some functions to work with our UI
	    function add_log(message){
	        var template = '<li>[' + new Date().getTime() + '] - ' + message + '</li>';
	        
	    	$('#importForTransfer #debug').find('ul').prepend(template);
	        $('#importForTraining #debug').find('ul').prepend(template);
	        $('#importForDimission #debug').find('ul').prepend(template);
		}
		
		function clearLog(){
			$('#importForTransfer #debug').find('ul').empty();
			$('#importForTraining #debug').find('ul').empty();
			$('#importForDimission #debug').find('ul').empty();
		}
	      
	    function update_file_status(id, status, message){
	        $('#uploadFile' + id).find('span.status').html(message).addClass(status);
	    }
	      
	    function update_file_progress(id, percent){
	    	$('#uploadFile' + id).find('div.progress').width(percent);
	    }
	</script>
</body>
</html>
